<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/jsp/common/taglibs.jsp" %>
    <script type="text/javascript" src="${ctx}/static/plugin/websocket/swfobject.js"></script>
    <script type="text/javascript" src="${ctx}/static/plugin/websocket/web_socket.js"></script>
    <script type="text/javascript" src="${ctx}/static/plugin/websocket/oa/controller.js"></script>
<!DOCTYPE html>
<html lang="zh-cn">
<head>

    <title>主页-${title}</title>

    <%@include file="/WEB-INF/jsp/common/meta2.jsp" %>

    <style>

        #nav-box {
            height: 100%;
            overflow-y: auto;
            padding-left: 0;
            position: relative;
        }

        #content-box {
            background: #EDEDED;
            padding: 0px;
            height: 100%;
            border-radius: 5px;
        }

        #footer {
            border-radius: 5px;
            bottom: 0;
            height: 35px;
            padding: 8px;
            position: fixed;
            width: 100%;
        }

        #wrap {
            bottom: 50px;
            display: block;
            position: absolute;
            top: 65px;
            width: 100%;
        }

        a.list-group-item {
            color: #0088CC;
        }
        
        a.highlight {
        	color: #FFF;
        	background-color: #0088CC;
        	outline:none;
        }
    </style>
	<script type="text/javascript">
	$(function(){
		$('.panel-body a.list-group-item').click(function(){
			$('.highlight').removeClass('highlight');
			$(this).addClass('highlight');
		});
	});
	
	var ws=new WebSocket("ws://127.0.0.1:8888/njoa/oa/websocket");
	//连接建立后调用的函数
	ws.onopen=function(){
	}
	//接受服务器传入的数据的处理
	ws.onmessage=function(e){
		$("#logCount").text(parseInt(e.data));
	}
	//定时向服务端取数据
	 setInterval(function () {
		 ws.send(${user.id});
    }, 5 * 1000);
	
	</script>
</head>
<body class="bg-primary">
<header role="banner" id="top" class="navbar navbar-static-top bg-info">
    <div class="container-fluid">
        <div class="navbar-header">
            <button data-target=".bs-navbar-collapse" data-toggle="collapse" type="button"
                    class="navbar-toggle collapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../">${title}</a>
        </div>
        <nav role="navigation" class="collapse navbar-collapse bg-info">

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a>
                        <i class="glyphicon glyphicon-user"></i>
                        ${user.roleData.name} - ${user.nickName}，您好！
                    </a>
                </li>
                <li>
                    <a href="${ctx}/res/home.html" target="_iframe">
                        <i class="glyphicon glyphicon-home"></i> 主页
                    </a>
                </li>
                <li>
                    <a href="${ctx}/oa/Notice/Log/undo/list"  target="_iframe">
                        <i class="glyphicon glyphicon-envelope"></i> 消息<span id="logCount"></span>
                    </a>
                </li>
                <li class="dropdown hidden">
                    <a aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="dropdown-toggle"
                       href="#" id="drop1">
                        <i class="glyphicon glyphicon-zoom-in"></i>
                        历史记录
                        <span class="caret"></span>
                    </a>
                    <ul aria-labelledby="drop1" role="menu" class="dropdown-menu">
                        <li role="presentation">
                            <a href="http://twitter.com/fat" tabindex="-1"
                               role="menuitem">Action</a>
                        </li>
                        <li role="presentation">
                            <a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Another
                                action</a>
                        </li>
                        <li role="presentation">
                            <a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Something
                                else here</a>
                        </li>
                        <li class="divider" role="presentation"></li>
                        <li role="presentation">
                            <a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Separated
                                link</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="${ctx}/common/user/password" target="_iframe">
                        <i class="glyphicon glyphicon-lock"></i> 修改密码
                    </a>
                </li>
                <li>
                    <a href="${ctx}/logout.html">
                        <i class="glyphicon glyphicon-log-out"></i> 退出
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</header>

<div class="container-fluid" id="wrap">
    <div class="col-sm-2" id="nav-box">
        <div class="panel-group" id="accordion">
            <c:forEach items="${user.resources}" var="data" varStatus="gIndex">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h4 class="panel-title" title="${data.value.group.memo}">
                            <i class="glyphicon glyphicon-folder-close"></i>
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse${gIndex.index}">
                                    ${data.value.group.name}
                            </a>
                        </h4>
                    </div>
                    <div id="collapse${gIndex.index}" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div class="list-group">
                                <c:forEach items="${data.value.items}" var="resource">
                                    <a title="${resource.memo}" href="${ctx}${resource.url}" target="_iframe"
                                       class="list-group-item">
                                        <span class="glyphicon ${resource.icon != null && fn:containsIgnoreCase(resource.icon, 'glyphicon') ?resource.icon: 'glyphicon-list-alt'}"></span>
                                            ${resource.name}
                                    </a>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>

            </c:forEach>

        </div>

    </div>
    <div class="col-sm-10" id="content-box">
        <div class="embed-responsive " style="height: 100%;width: 100%;border-radius: 5px;">
            <!--embed-responsive-16by9-->
            <iframe class="embed-responsive-item" name="_iframe" src="${ctx}/res/home.html"></iframe>
        </div>
    </div>
</div>
<div id="footer" class="container-fluid bg-info">
    <div class="text-center text-success">
        <a href="#?">帮助?</a>
        版本: ${VERSION}
        <a href="mailto:contact-us@hmz.com">
            联系我们
        </a>
    </div>
</div>

</body>
</html>
